{extend name="layout_container" /}

{block name="title"}
{$adminNavs[$adminNavActive][0] ?? '预览'}
{/block}

{block name="main"}
<el-row :gutter="30" class="">
    <el-col :span="4" v-for="n in counter">
        <el-card shadow="always">
            {{n.label}}:{{n.value}}
        </el-card>
    </el-col>
</el-row>

<el-row :gutter="20">
    <el-col :span="12">
        <div id="canvas"></div>
    </el-col>
    <el-col :span="12">
        <div id="canvas2"></div>
    </el-col>

</el-row>

<el-row :gutter="20">
    <el-col :span="12">
        <div id="Funnels"></div>
    </el-col>
    <el-col :span="12">
        <div id="Pie1"></div>
    </el-col>

</el-row>

<el-row :gutter="20">
    <el-col :span="12">
        <h4 style="text-align: center">门店业绩排行</h4>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="rank"
                    label="排名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="门店"
                    >
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="业绩"
                    width="180">
            </el-table-column>
        </el-table>
    </el-col>
    <el-col :span="12">
        <h4 style="text-align: center">销售人员业绩排行</h4>
        <el-table
                :data="tableData2"
                style="width: 100%">
            <el-table-column
                    prop="rank"
                    label="排名"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                   >
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="业绩"
                    width="180">
            </el-table-column>
        </el-table>
    </el-col>


</el-row>

{/block}

{block name="script"}
<script src="https://cdn.jsdelivr.net/npm/@antv/g2plot@latest/dist/g2plot.js"></script>

<script>
    new Vue({
        el: '#app',
        template: "#appCnt",
        data: function () {
            return {
                counter: [
                    {'label': '总订单', 'value': 99},
                    {'label': '总销量', 'value': 99},
                    {'label': '总销售额', 'value': 99},
                    {'label': '总浏览人数', 'value': 99},
                    {'label': '新用户购买', 'value': 99},
                    {'label': '老用户购买', 'value': 99}
                ],
                tableData: [
                    {rank: 1, name: '成都旗舰店', num: 999},
                    {rank: 1, name: '广州旗舰店', num: 850},
                    {rank: 1, name: '北京旗舰店', num: 800},
                    {rank: 1, name: '杭州旗舰店', num: 780},
                    {rank: 1, name: '成都高新店', num: 600},
                ],
                tableData2: [
                    {rank: 1, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: '老钱', num: 300},
                    {rank: 2, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: '老王', num: 200},
                    {rank: 3, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: '老张', num: 100},
                ],
            }
        },
        methods: {
            goBack: function () {
                window.location.href = document.referrer
            }
        },
        created: function () {
        }
    })
</script>

<script>

    const data = [
        {year: '1991', value: 3},
        {year: '1992', value: 4},
        {year: '1993', value: 3.5},
        {year: '1994', value: 5},
        {year: '1995', value: 4.9},
        {year: '1996', value: 6},
        {year: '1997', value: 7},
        {year: '1998', value: 9},
        {year: '1999', value: 13},
    ];
    const linePlot = new G2Plot.Line('canvas', {
        title: {
            visible: true,
            text: '销售统计',
        },
        padding: 'auto',
        forceFit: true,
        data,
        xField: 'year',
        yField: 'value',
        label: {
            visible: true,
            type: 'point',
        },
        point: {
            visible: true,
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#2593fc',
                lineWidth: 2,
            },
        },
    });

    linePlot.render();

    const data2 = [
        {year: '1991', value: 99},
        {year: '1992', value: 200},
        {year: '1993', value: 250},
        {year: '1994', value: 260},
        {year: '1995', value: 255},
        {year: '1996', value: 180},
        {year: '1997', value: 300},
        {year: '1998', value: 120},
        {year: '1999', value: 110},
    ];
    const linePlot2 = new G2Plot.Line('canvas2', {
        title: {
            visible: true,
            text: '访问统计',
        },
        padding: 'auto',
        forceFit: true,
        data: data2,
        xField: 'year',
        yField: 'value',
        label: {
            visible: true,
            type: 'point',
        },
        point: {
            visible: true,
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#2593fc',
                lineWidth: 2,
            },
        },
    });

    linePlot2.render();

    const data3 = [
        {action: '浏览网站', pv: 50000},
        {action: '放入购物车', pv: 35000},
        {action: '生成订单', pv: 25000},
        {action: '支付', pv: 15000},
        {action: '成交', pv: 8500},
    ];

    const funnelPlot = new G2Plot.Funnel(document.getElementById('Funnels'), {
        data: data3,
        xField: 'action',
        yField: 'pv',
    });
    funnelPlot.render();


    const data4 = [
        {
            type: '成都',
            value: 27,
        },
        {
            type: '武汉',
            value: 25,
        },
        {
            type: '北京',
            value: 18,
        },
        {
            type: '深圳',
            value: 15,
        },
        {
            type: '上海',
            value: 10,
        },
        {
            type: '东莞',
            value: 5,
        },
    ];


    const piePlot = new G2Plot.Pie("Pie1", {
        forceFit: true,
        title: {
            visible: true,
            text: '销售区域统计',
        },
        radius: 0.8,
        data: data4,
        angleField: 'value',
        colorField: 'type',
        label: {
            visible: true,
            type: 'spider',
        },
    });

    piePlot.render();

</script>

{/block}